<template>
  <div class="container">
    <div class="item">
      <img src="@/assets/user.jpeg" alt="" />
    </div>
    <div class="item">
      <img src="@/assets/user.jpeg" alt="" />
    </div>
    <div class="item">
      <img src="@/assets/user.jpeg" alt="" />
    </div>
    <div class="item">
      <img src="@/assets/user.jpeg" alt="" />
    </div>
    <div class="item">
      <img src="@/assets/user.jpeg" alt="" />
    </div>
  </div>
</template>
<style lang="scss">
$size: 300px;
$imgSize: 80px;
.container {
  width: $size;
  height: $size;
  margin: 40px auto;
  outline: 1px solid red;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  animation: rotation linear infinite 20s;
  .item {
    width: $imgSize;
    height: $imgSize;
    position: absolute;
    margin-top: -40px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
$n: 5;
$pDeg: 360deg / $n;
.item {
  transform-origin: center $size / 2 + $imgSize / 2;
  @for $i from 1 through $n {
    &:nth-child(#{$i}) {
      $deg: ($i - 1) * $pDeg;
      transform: rotate($deg);
      img {
        --initDeg: #{$deg}; // css变量
        transform: rotate(-$deg);
        animation: rotation linear infinite 20s reverse;
      }
    }
  }
}
@keyframes rotation {
  to {
    transform: rotate(calc(360deg - var(--initDeg, 0deg)));
  }
}
</style>
